<!--菜单区域组件-->
<template>
  <div class="content">
    <div class="content-type">
      文件状态：<span>{{ headType }}</span>
    </div>
    <div class="content-menu">
      <el-button @click="close">关闭</el-button>
      <el-button type="primary" @click="temporaryStorage">暂存</el-button>
      <el-button type="primary" @click="approvalRecord">审批记录</el-button>
      <el-button type="primary" @click="processTrace">流程跟踪</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </div>
  </div>
</template>
<script setup>
const props = defineProps({
  headType: {
    type: String, //数据类型
    required: false, //是否必须
    default: "拟稿", //默认值
  },
});
const emit = defineEmits(["close", "temporaryStorage", "approvalRecord", "processTrace", "submitForm"]);
/**
 * 关闭
 * @param e 数据
 */
const close = (e) => {
  emit("close", "关闭");
};
/**
 * 暂存
 * @param e 数据
 */
const temporaryStorage = (e) => {
  emit("temporaryStorage", "暂存");
};
/**
 * 审批记录
 * @param e 数据
 */
const approvalRecord = (e) => {
  emit("approvalRecord", "审批记录");
};
/**
 * 流程跟踪
 * @param e 数据
 */
const processTrace = (e) => {
  emit("approvalRecord", "流程跟踪");
};
/**
 * 提交
 * @param e 数据
 */
const submitForm = (e) => {
  emit("submitForm", "提交");
};
</script>

<style scoped lang="less">
.content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 68px;
  padding: 0 24px;
  border-bottom: 8px solid #ebf6fe;
  .content-type {
    span {
      color: #309df0;
    }
  }
  .content-menu {
    display: flex;
  }
}
</style>
